<template>
  <div class="swiper-container swiper-banner">
    <div class="swiper-wrapper" style="width: 1200px">
      <div v-for="item in items" :key="item.id" class="swiper-slide">
        <a target="_blank" href="javascript:void(0)" @click="getDeatil(item)">
          <img :src="version + '/uploadFile/path/' + item.titlePicUrl" alt="titlePicUrl">
        </a>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-banner" />
    <!-- Add Arrows -->
    <div class="swiper-button-next" />
    <div class="swiper-button-prev" />
  </div>
</template>

<script>
import axios from 'axios'
import Swiper from 'swiper'
import { VERSION } from '@/constants/uri'
import { HOME_ITEM } from '@/constants/storage'
export default {
  components: {
    Swiper
  },
  data() {
    return {
      items: [],
      version: VERSION
    }
  },
  mounted() {
    axios.get(`/getMessageRelease/1/1/100`).then(res => {
      if (res.success) {
        this.items = res.data
        setTimeout(() => {
          new Swiper('.swiper-banner', {
            slidesPerView: 1,
            spaceBetween: 0,
            autoplay: {
              delay: 8000,
              disableOnInteraction: false
            },
            loop: true,
            pagination: {
              el: '.swiper-pagination-banner',
              clickable: true
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          })
        }, 0)
      }
    })
  },
  methods: {
    getDeatil(item) {
      sessionStorage.setItem(HOME_ITEM, JSON.stringify(item))
      window.open(`/home/detail/${item.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .swiper-slide {
    height: 400px;
    position: relative;
    width: 1200px;
    img {
      position: relative;
      display: block;
      width: 1200px;
    }
  }
  .swiper-container-3d {
    width: 1200px;
  }
  .swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    width: 1200px;
  }
</style>
